<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <model1></model1>
        <model1></model1>
        <model1></model1>
    </div>

    <div id="app1">
        <model1></model1>
    </div>

</body>
<script type="application/javascript">
    /**
     * 定义一个组件, 定义组件的目的是为了封装重用
     * model1是组件的名字
     * template定义的是模板, 模板中定义html和css以及函数绑定, 显示部分内容
     * data部分定义全局变量
     * methods部分定义方法, 定义的方法可以在模板中封装的html中进行函数绑定调用使用
     */
    Vue.component("model1",{
        template:"<div><h1>组件化{{title}}</h1><input type='button' value='点击我' @click='clickMe'></div>",
        data:function () {
            return {
                title:"hello Vue"
            }
        },
        methods:{
            clickMe:function () {
                alert("点我干嘛！")
            }
        }
    });

    //调用组件, 定义组件在哪个div中使用
    new Vue({
       el:"#app",
    });

    new Vue({
        el:"#app1",
    });
</script>
</html>